<template>
  <div>
    <!-- 自定义导航 -->
    <van-nav-bar :title="navName" left-text="取消" right-text="保存" left-arrow @click-left="cancel" @click-right="save" :fixed="true"/>
    <!-- 表单 -->
    <van-cell-group style="padding-top:51px">
      <van-field v-model="from.name" label="建筑名称" placeholder="请输入" required :error="nameErr" @focus="nameErr=false" clearable input-align="right"/>
      <van-cell title="请选择建筑类别" is-link :value="from.buildingClass" @click="openbuildtan" required />
      <!-- 建筑类别 弹层 -->
      <van-action-sheet v-model="buildingsClass" :actions="actions" @select="bulidingsSelect" />

      <van-field type="tel" v-model="from.mainphone" label="电话总机" placeholder="请输入" input-align="right" clearable/>
      <van-field type="textarea" v-model="from.description" label="描述" placeholder="请输入" clearable :maxlength="140" show-word-limit autosize/>
    </van-cell-group>
    <van-cell-group>
      <van-switch-cell v-model="from.status" :class="openstyles" title="是否启用该建筑" @change="changecolor" active-value="1" inactive-value="2" active-color="#13ce66"/>
    </van-cell-group>
  </div>
</template>
<script>
export default {
  data(){
    return{  
      nameErr: false, //错误标识
      navName: localStorage.getItem('navName'), //导航名称
      buildingsClass: false,  //建筑类别 弹层变量
      actions: [
        // { id: '0', subname: '描述信息1', classfication:'122' },
      ],
      openstyles:'', 
      from:{
        name:'',              //建筑名称
        buildingClassId:'',   //建筑类别ID
        buildingClass:'', //建筑类别名
        locationId: sessionStorage.getItem('ProID'),        //项目点id
        mainphone:'',        //电话
        description:'',      //描述
        status: '1', //1-启用 2-停用
      },
    }
  },
  methods:{
    openbuildtan(){
      this.buildingsClass = true;
    },

    //选择建筑类别 值
    bulidingsSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.buildingsClass = false;
      this.from.buildingClass = item.subname;  //选中的建筑类别名（赋值）
      this.from.buildingClassId = item.id  //选中的建筑类别ID（赋值）
    },
    //建筑类别数据获取
    getbulidingsClsaa(){
      // this.$http.get(`/api/constants?classfication=buildingClass&status=1`).then(res =>{
      this.$http.get(`/api/constants/getConstantsList?classfication=buildingClass&status=1`,{
          headers:{ 'Authorization':localStorage.getItem('token'),}
        }).then(res =>{
        if(res.data.errcode == 0){
          if(res.data.data.length ==0 ){
            this.buildingsClass = false;
            this.$toast.fail("建筑类别为空");
            return;
          }
          this.actions = [];
           for (let index = 0; index < res.data.data.length; index++) {
            this.actions.push(
              {id: res.data.data[index].id,
               subname: res.data.data[index].name,
               classfication: res.data.data[index].classfication 
            });
           }
        }else{
          this.$toast("获取建筑类别数据有误！")
        }
       
      })
    },
    //取消按钮
    cancel() {
      this.$dialog.confirm({
        title: '提示', message: '是否放弃本次编辑？'
      }).then(() => {
        this.$router.go(-1);//返回上一层
      }).catch(() => {});
    },
    //保存按钮
    save() {
      if(!this.from.name){
        this.nameErr = true;  //建筑名不为空  为空红色提示
        this.$toast("建筑名称不能为空");
        return 
      }
      if(!this.from.buildingClass){
        this.buildingClassErr = true;
        this.$toast("建筑类别不能为空");
        return;
      }
      let data = {
        locationId: this.from.locationId,
        name: this.from.name,
        buildingClassId: this.from.buildingClassId,
        buildingClass:this.from.buildingClass, //建筑类别名
        description: this.from.description,
        mainphone: this.from.mainphone,
        status: parseInt(this.from.status),
      };
      this.$http.post("/api/buildings/creationBuildings", data,{
      headers:{ 'Authorization':localStorage.getItem('token'),}
      }).then(res =>{
        if(res.data.errcode == -3){
          this.nameErr = true;
          this.$toast.fail("添加失败，建筑名重复！");
          return;
        }
          if(res.data.errcode == 0){
          this.$toast.success('保存成功！');
          this.from = {};
          this.$router.replace({path: '/'})
          }
      })
      
      
    },
    // 开关改变颜色
    changecolor(){
      if(this.from.status == 1){
        this.openstyles='open';
      }else{
        this.openstyles='';
      }
    },
    
  },
  created(){
    this.getbulidingsClsaa();
  }
}

</script>

<style scoped>
  .van-cell {
    color: #979797 !important;
  }
  /* 开关选择颜色 */
  .open{
    color: #333 !important;
  }
</style>